<!--  -->
<template>
  <div>
    <d2-form
      :inline="true"
      :formModel="formModel"
      :formList="formList"
    >
      <slot name="form-slot">
        <!-- <el-button @click="search">dafdsf</el-button> -->
        <el-button
          type="primary"
          :size="btn_size"
          icon="el-icon-search"
          :id="tableParams.btnId"
        >搜索</el-button>
      </slot>
    </d2-form>
    <sticky-table
      :headTableParams="headTableParams"
      :tableParams="tableParams"
      :getListApi="getListApi"
      :searchForm="searchForm"
    ></sticky-table>
    <!-- <basis-table
      class="head-table"
      v-show="showHead"
      ref="headTable"
      :tableParams="headTableParams"
    >
    </basis-table>
    <basis-table
      ref="addStoreTable"
      :searchForm="searchForm"
      :tableParams="tableParams"
      :getListApi="getListApi"
    >
    </basis-table> -->
    <img
      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg"
      alt=""
    >
    <img
      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg"
      alt=""
    >
    <img
      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg"
      alt=""
    >
    <img
      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg"
      alt=""
    >
    <img
      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg"
      alt=""
    >
    <img
      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg"
      alt=""
    >
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data() {
    return {
      searchForm: [],
      formModel: {},
      formList: [
        {
          label: '用户名称',
          type: 'input',
          inputType: 'text',
          model: 'username',
          placeholder: '请输入用户名称',
          change: (e) => {
            this.change(e)
          }
        },
        {
          label: '角色',
          type: 'select',
          model: 'number',
          filterable: true,
          remote: true,
          remoteMethod: (query) => {
            console.log(query, 232)
          },
          options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }]
        },
        {
          label: '选择日期',
          type: 'datePicker',
          dateType: 'date',
          model: 'date',
          placeholder: '选择日期'
        }
      ],
      headTableParams: {},
      tableParams: {
        btnId: new Date().getTime() + parseInt(Math.random() * 1000),
        listName: 'merchants',
        tableOption: {

        },
        tableColumns: [{
          label: '店面名称',
          prop: 'name',
          width: 200
        }, {
          label: '商户号',
          prop: 'address',
          width: 100
        }, {
          label: '客户名称',
          prop: 'date',
          width: 120
        }, {
          label: '省份',
          prop: 'belongProvinceName'
        }, {
          label: '店面品牌',
          prop: 'carBrandName',
          width: 100
        }]
      },
      getListApi: null
      // showHead: false,
      // scrollTop: 0,
      // tableOffset: {
      //   top: 0,
      //   height: 0
      // }
    }
  },
  // watch: {
  //   scrollTop(val, oldVal) {
  //     console.log(val > this.tableOffset.top)
  //     if (val > this.tableOffset.top) {
  //       this.showHead = true
  //     } else {
  //       this.showHead = false
  //     }
  //   }
  // },
  mounted() {
    this.headTableParams = _.cloneDeep(this.tableParams)
    this.headTableParams.hasPage = true
    //   window.addEventListener('scroll', () => {
    //     this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    //     // console.log(this.scrollTop)
    //   })
    //   setTimeout(() => {
    //     this.$refs.headTable.$children[0].bodyWrapper.setAttribute('style', 'display: none')
    //     console.log(this.$refs.addStoreTable, this.$refs.addStoreTable.$el.offsetTop)
    //     this.tableOffset.top = this.$refs.addStoreTable.$el.offsetTop
    //     this.tableOffset.height = this.$refs.addStoreTable.$el.offsetHeight
    //   }, 1000)
  }
}
</script>

